<!--
 * @Descripttion: 编辑房源
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-01-11 14:02:10
-->
<template>
  <div class="lb-app-edit-house">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <lb-classify-title title="基本信息"></lb-classify-title>
      <el-form
        @submit.native.prevent
        :model="basicForm"
        :rules="basicFormRules"
        ref="basicForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="房源名称" prop="title">
          <el-input
            v-model="basicForm.title"
            placeholder="请输入房源名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="选择分类" prop="category">
                  <el-select @change="categoryChange" v-model="basicForm.category" placeholder="请选择">
                    <el-option
                      v-for="item in cateOptions"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                      >
                    </el-option>
                  </el-select>
                  <lb-tool-tips>编辑房源时，只能选择当前分类所属类型下的所有分类</lb-tool-tips>
                </el-form-item> -->
        <el-form-item label="所在地区" prop="area_id">
          <el-cascader
            :show-all-levels="false"
            v-model="basicForm.area_id"
            :options="areaOptions"
            :props="{ checkStrictly: true, value: 'id', label: 'title' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item
          :label="house_type === 2 ? '售楼部地址' : '详细地址'"
          prop="address"
        >
          <el-input
            v-model="basicForm.address"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input
            v-model="basicForm.longitude"
            placeholder="请输入经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input
            v-model="basicForm.latitude"
            placeholder="请输入纬度"
          ></el-input>
          <lb-button @click="showMap = true" type="primary" plain size="mini"
            >获取经纬度</lb-button
          >
        </el-form-item>

        <el-form-item label="选择员工" prop="">
          <el-select
            v-model="basicForm.house_staff"
            multiple
            filterable
            clearable
            collapse-tags
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="basicForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="标签" prop="label">
          <el-tag
            :key="index"
            v-for="(tag, index) in basicForm.labels"
            closable
            :disable-transitions="false"
            @close="handleClose(index)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            :maxlength="20"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            icon="el-icon-plus"
            @click="showInput"
            >添加</el-button
          >
          <lb-tool-tips
            >标签最多可输入20个字，房源列表只调取前4个标签信息</lb-tool-tips
          >
        </el-form-item>
        <el-form-item
          label="房源描述"
          prop="community_info"
          v-if="house_type !== 2"
        >
          <el-input
            type="textarea"
            v-model="basicForm.community_info"
            placeholder="请输入描述信息"
            :autosize="{ minRows: 3, maxRows: 4 }"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 房源属性 -->
      <lb-classify-title
        title="房源属性"
        v-if="house_type !== 2"
      ></lb-classify-title>
      <el-form
        @submit.native.prevent
        :inline="true"
        :model="house"
        :rules="houseRules"
        ref="house"
        class="inline-form"
        label-width="80px"
        v-if="house_type !== 2"
      >
        <el-form-item label="售价(万)" prop="售价">
          <el-input
            v-model="house.售价"
            placeholder="支持区间，不填默认为待定"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价(元)" prop="单价">
          <el-input-number
            class="lb-input-number"
            v-model.number="house.单价"
            :controls="false"
            :precision="2"
            :min="0"
            placeholder="若不输入，则默认待定"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="户型" prop="户型">
          <el-select v-model="house.户型" placeholder="请选择户型">
            <el-option
              v-for="(item, index) in apartmentOptions"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="室内面积" prop="室内面积">
          <el-input
            v-model="house.室内面积"
            placeholder="支持区间，不填默认为待定"
          ></el-input>
        </el-form-item>
        <el-form-item label="建筑面积" prop="建筑面积" v-if="house_type === 0">
          <el-input
            v-model="house.建筑面积"
            placeholder="支持区间，不填默认为待定"
          ></el-input>
        </el-form-item>
        <el-form-item label="朝向" prop="朝向" v-if="house_type === 0">
          <el-input
            v-model="house.朝向"
            placeholder="请输入房屋朝向"
          ></el-input>
        </el-form-item>
        <el-form-item label="楼层" prop="楼层" v-if="house_type === 0">
          <el-input
            v-model="house.楼层"
            placeholder="请输入所在楼层"
          ></el-input>
        </el-form-item>
        <el-form-item label="挂牌" prop="挂牌" v-if="house_type === 0">
          <el-input v-model="house.挂牌" placeholder="请输入挂牌"></el-input>
        </el-form-item>
        <el-form-item label="房屋楼型" prop="楼型" v-if="house_type === 0">
          <el-input v-model="house.楼型" placeholder="请输入楼型"></el-input>
        </el-form-item>
        <el-form-item label="电梯" prop="电梯" v-if="house_type === 0">
          <el-input v-model="house.电梯" placeholder="请输入电梯"></el-input>
        </el-form-item>
        <el-form-item label="装修" prop="装修" v-if="house_type === 0">
          <el-input v-model="house.装修" placeholder="请输入装修"></el-input>
        </el-form-item>
        <el-form-item label="年代" prop="年代" v-if="house_type === 0">
          <el-input v-model="house.年代" placeholder="请输入年代"></el-input>
        </el-form-item>
        <el-form-item label="用途" prop="用途" v-if="house_type === 0">
          <el-input v-model="house.用途" placeholder="请输入用途"></el-input>
        </el-form-item>
        <el-form-item label="权属" prop="权属" v-if="house_type === 0">
          <el-input v-model="house.权属" placeholder="请输入权属"></el-input>
        </el-form-item>
        <el-form-item label="梯户比例" prop="梯户比例" v-if="house_type === 0">
          <el-input
            v-model="house.梯户比例"
            placeholder="请输入梯户比例"
          ></el-input>
        </el-form-item>
        <el-form-item label="户型结构" prop="户型结构" v-if="house_type === 0">
          <el-input
            v-model="house.户型结构"
            placeholder="请输入户型结构"
          ></el-input>
        </el-form-item>
        <el-form-item label="供暖方式" prop="供暖方式" v-if="house_type === 0">
          <el-input
            v-model="house.供暖方式"
            placeholder="请输入供暖方式"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 楼盘信息 -->
      <lb-classify-title
        title="楼盘信息"
        v-if="house_type === 2"
      ></lb-classify-title>
      <el-form
        @submit.native.prevent
        :inline="true"
        :model="build"
        :rules="buildRules"
        ref="build"
        class="inline-form"
        label-width="80px"
        v-if="house_type === 2"
      >
        <el-form-item label="单价(元)" prop="单价">
          <el-input-number
            class="lb-input-number"
            v-model.number="build.单价"
            :controls="false"
            :precision="2"
            :min="0"
            placeholder="若不输入，则默认待定"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="楼盘地址" prop="楼盘地址">
          <el-input
            v-model="build.楼盘地址"
            placeholder="请输入楼盘地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="开发商" prop="开发商">
          <el-input
            v-model="build.开发商"
            placeholder="请输入开发商"
          ></el-input>
        </el-form-item>
        <el-form-item label="物业公司" prop="物业公司">
          <el-input
            v-model="build.物业公司"
            placeholder="请输入物业公司"
          ></el-input>
        </el-form-item>
        <el-form-item label="开盘时间" prop="开盘时间">
          <el-input
            v-model="build.开盘时间"
            placeholder="请输入开盘时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="交房时间" prop="交房时间">
          <el-input
            v-model="build.交房时间"
            placeholder="请输入交房时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="建筑类型" prop="建筑类型">
          <el-input
            v-model="build.建筑类型"
            placeholder="请输入建筑类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="产权年限" prop="产权年限">
          <el-input
            v-model="build.产权年限"
            placeholder="请输入产权年限"
          ></el-input>
        </el-form-item>
        <el-form-item label="车位占比" prop="车位占比">
          <el-input
            v-model="build.车位占比"
            placeholder="请输入车位占比"
          ></el-input>
        </el-form-item>
        <el-form-item label="装修标准" prop="装修标准">
          <el-input
            v-model="build.装修标准"
            placeholder="请输入装修标准"
          ></el-input>
        </el-form-item>
        <el-form-item label="绿化率" prop="绿化率">
          <el-input
            v-model="build.绿化率"
            placeholder="请输入绿化率"
          ></el-input>
        </el-form-item>
        <el-form-item label="物业费" prop="物业费">
          <el-input
            v-model="build.物业费"
            placeholder="请输入物业费"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 小区信息 -->
      <lb-classify-title
        title="小区信息"
        v-if="house_type === 0"
      ></lb-classify-title>
      <el-form
        @submit.native.prevent
        :inline="true"
        :model="area"
        :rules="areaRules"
        ref="area"
        class="inline-form"
        label-width="80px"
        v-if="house_type === 0"
      >
        <el-form-item label="小区名称" prop="小区名称">
          <el-input
            v-model="area.小区名称"
            placeholder="请输入小区名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="物业类型" prop="物业类型">
          <el-input
            v-model="area.物业类型"
            placeholder="请输入物业类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="产权年限" prop="产权年限">
          <el-input
            v-model="area.产权年限"
            placeholder="请输入产权年限"
          ></el-input>
        </el-form-item>
        <el-form-item label="建筑类型" prop="建筑类型">
          <el-input
            v-model="area.建筑类型"
            placeholder="请输入建筑类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="物业费" prop="物业费">
          <el-input v-model="area.物业费" placeholder="请输入物业费"></el-input>
        </el-form-item>
        <el-form-item label="绿化率" prop="绿化率">
          <el-input v-model="area.绿化率" placeholder="请输入绿化率"></el-input>
        </el-form-item>
        <el-form-item label="容积率" prop="容积率">
          <el-input v-model="area.容积率" placeholder="请输入容积率"></el-input>
        </el-form-item>
        <el-form-item label="竣工时间" prop="竣工时间">
          <el-input
            v-model="area.竣工时间"
            placeholder="请输入竣工时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="开发商" prop="开发商">
          <el-input v-model="area.开发商" placeholder="请输入开发商"></el-input>
        </el-form-item>
        <el-form-item label="物业公司" prop="物业公司">
          <el-input
            v-model="area.物业公司"
            placeholder="请输入物业公司"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 上传内容 -->
      <lb-classify-title title="上传内容"></lb-classify-title>
      <el-form
        @submit.native.prevent
        :model="uploadForm"
        :rules="uploadFormRules"
        ref="uploadForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="轮播图" prop="imgs">
          <lb-cover
            type="more"
            :fileList="uploadForm.imgs"
            @selectedFiles="selectedFiles($event, 'imgs')"
            @moveFiles="moveFiles($event, 'imgs')"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：750*580</lb-tool-tips>
        </el-form-item>
        <el-form-item label="详情图" prop="img_info" v-if="house_type === 1">
          <lb-cover
            type="more"
            :fileList="uploadForm.img_info"
            @selectedFiles="selectedFiles($event, 'img_info')"
            @moveFiles="moveFiles($event, 'img_info')"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：750*n</lb-tool-tips>
        </el-form-item>
        <el-form-item label="视频" prop="video">
          <div class="item-warp">
            <div class="upload-file-warp">
              <input
                type="text"
                class="choice-file-input"
                v-model="uploadForm.video"
                placeholder="选择视频文件"
              />
              <lb-cover
                type="button"
                fileType="video"
                @selectedFiles="getVideo"
              ></lb-cover>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="视频封面" prop="video_cover">
          <lb-cover
            @selectedFiles="getVideoCover"
            :fileList="uploadForm.video_cover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：750*580</lb-tool-tips>
        </el-form-item>
        <el-form-item label="VR路径" prop="vr_path">
          <el-input
            v-model="uploadForm.vr_path"
            placeholder="请输入VR路径"
          ></el-input>
        </el-form-item>
        <el-form-item label="VR封面图" prop="vr_cover">
          <lb-cover
            @selectedFiles="getVRCover"
            :fileList="uploadForm.vr_cover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：750*580</lb-tool-tips>
        </el-form-item>
        <!-- 楼盘演示 -->
        <block v-if="house_type === 2">
          <lb-classify-title title="楼盘演示"></lb-classify-title>
          <el-form-item label="网页链接" prop="monomer_path">
            <div class="house-wrap">
              <div class="lb-upload-more">
                <div
                  class="more-item"
                  v-for="(item, index) in uploadForm.monomer_path"
                  :key="index"
                >
                  <lb-image :src="item.img" />
                  <div class="mask">
                    <i
                      @click="showHouse(index, 1)"
                      class="el-icon-edit-outline"
                    ></i>
                    <i @click="delHouse(index, 1)" class="el-icon-delete"></i>
                  </div>
                </div>
                <div
                  class="up-item"
                  @click="showHouseLinkDialog = true"
                  v-if="uploadForm.monomer_path.length < 20"
                >
                  <i class="el-icon-plus"></i>
                </div>
              </div>
            </div>
            <lb-tool-tips>最多添加20个</lb-tool-tips>
            <el-dialog
              :visible.sync="showHouseLinkDialog"
              :title="showHouseLinkInd ? '编辑网页链接' : '新增网页链接'"
              width="600px"
              center
              :append-to-body="true"
              :show-close="false"
            >
              <el-form
                @submit.native.prevent
                :model="addLinkForm"
                :rules="addFormRules"
                ref="addForm"
                label-width="80px"
                style="width: 500px"
              >
                <el-form-item label="封面图" prop="img">
                  <lb-cover
                    @selectedFiles="getMonomerCover"
                    :fileList="addLinkForm.img"
                  ></lb-cover>
                  <lb-tool-tips>图片建议尺寸：686*370</lb-tool-tips>
                </el-form-item>
                <el-form-item label="名称" prop="title">
                  <el-input
                    v-model="addLinkForm.title"
                    placeholder="请输入名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="链接" prop="link">
                  <el-input
                    v-model="addLinkForm.link"
                    placeholder="请输入链接"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="closeHouse(1)">{{
                  $t('action.cancel')
                }}</el-button>
                <el-button type="primary" @click="submitAddFormInfo(1)">{{
                  $t('action.add')
                }}</el-button>
              </span>
            </el-dialog>
          </el-form-item>

          <el-form-item label="户型鉴赏" prop="new_hx">
            <div class="house-wrap">
              <div class="lb-upload-more">
                <div
                  class="more-item"
                  v-for="(item, index) in uploadForm.new_hx"
                  :key="index"
                >
                  <lb-image :src="item.img" />
                  <div class="mask">
                    <i
                      @click="showHouse(index, 2)"
                      class="el-icon-edit-outline"
                    ></i>
                    <i @click="delHouse(index, 2)" class="el-icon-delete"></i>
                  </div>
                </div>
                <div
                  class="up-item"
                  @click="showHouseDialog = true"
                  v-if="uploadForm.new_hx.length < 20"
                >
                  <i class="el-icon-plus"></i>
                </div>
              </div>
            </div>
            <lb-tool-tips>最多添加20个</lb-tool-tips>

            <el-dialog
              :visible.sync="showHouseDialog"
              :title="showHouseInd ? '编辑户型' : '新增户型'"
              width="600px"
              center
              :append-to-body="true"
              :show-close="false"
            >
              <el-form
                @submit.native.prevent
                :model="addForm"
                :rules="addFormRules"
                ref="addForm"
                label-width="80px"
                style="width: 500px"
              >
                <el-form-item label="户型图" prop="img">
                  <lb-cover
                    @selectedFiles="getNewHxCover"
                    :fileList="addForm.img"
                  ></lb-cover>
                  <lb-tool-tips>图片建议尺寸：375*460</lb-tool-tips>
                </el-form-item>
                <el-form-item label="链接" prop="link">
                  <el-input
                    v-model="addForm.link"
                    placeholder="请输入链接"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="closeHouse(2)">{{
                  $t('action.cancel')
                }}</el-button>
                <el-button type="primary" @click="submitAddFormInfo(2)">{{
                  $t('action.add')
                }}</el-button>
              </span>
            </el-dialog>
          </el-form-item>
          <el-form-item label="效果图" prop="design_img">
            <lb-cover
              type="more"
              :fileList="uploadForm.design_img"
              :fileSize="20"
              @selectedFiles="selectedFiles($event, 'design_img')"
              @moveFiles="moveFiles($event, 'design_img')"
            ></lb-cover>
            <lb-tool-tips>图片建议尺寸：485*300</lb-tool-tips>
          </el-form-item>
          <el-form-item label="实拍图" prop="real_img">
            <lb-cover
              type="more"
              :fileList="uploadForm.real_img"
              :fileSize="20"
              @selectedFiles="selectedFiles($event, 'real_img')"
              @moveFiles="moveFiles($event, 'real_img')"
            ></lb-cover>
            <lb-tool-tips>图片建议尺寸：485*300</lb-tool-tips>
          </el-form-item>
          <!-- 楼盘介绍 -->
          <lb-classify-title title="楼盘介绍"></lb-classify-title>
          <el-form-item label="销售方案" prop="sale_fun">
            <el-input
              type="textarea"
              v-model="uploadForm.sale_fun"
              placeholder="请输入销售方案"
              :rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item label="楼盘描述" prop="house_about">
            <el-input
              type="textarea"
              v-model="uploadForm.house_about"
              placeholder="请输入楼盘描述"
              :rows="5"
            ></el-input>
          </el-form-item>
        </block>

        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
    <lb-map :dialogVisible.sync="showMap" @selectedLatLng="getLatLng"></lb-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showHouseInd: 0,
      showHouseDialog: false,
      showHouseLinkInd: 0,
      showHouseLinkDialog: false,
      category: null,
      house_type: 0,
      loading: false,
      showMap: false,
      id: '',
      options: [],
      basicForm: {
        title: '',
        category: '',
        area_id: [],
        address: '',
        latitude: '',
        longitude: '',
        labels: [],
        community_info: '',
        top: 0,
        house_staff: []
      },
      basicFormRules: {
        title: { required: true, type: 'string', message: '请输入房源名称', trigger: 'blur' },
        category: { required: true, type: 'number', message: '请选择类型', trigger: 'change' },
        area_id: { required: true, type: 'array', message: '请选择地区', trigger: 'change' },
        address: { required: true, type: 'string', message: '请输入详细地址', trigger: 'blur' },
        latitude: { required: true, message: '请输入纬度', trigger: ['blur', 'change'] },
        longitude: { required: true, message: '请输入经度', trigger: ['blur', 'change'] },
        // community_info: {required: true, type: 'string', message: '请输入描述详情', trigger: 'blur'},
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' }
      },
      house: {
        '售价': '',
        '单价': '',
        '户型': '',
        '建筑面积': '',
        '室内面积': '',
        '朝向': '',
        '楼层': '',
        '挂牌': '',
        '楼型': '',
        '电梯': '',
        '装修': '',
        '年代': '',
        '用途': '',
        '权属': '',
        '梯户比例': '',
        '户型结构': '',
        '供暖方式': ''
      },
      houseRules: {
        '户型': { required: true, type: 'number', message: '请选择户型', trigger: 'change' }
      },
      // 小区信息表单
      area: {
        '小区名称': '',
        '物业类型': '',
        '产权年限': '',
        '建筑类型': '',
        '物业费': '',
        '绿化率': '',
        '容积率': '',
        '竣工时间': '',
        '开发商': '',
        '物业公司': ''
      },
      areaRules: {
      },
      // 楼盘信息表单
      build: {
        '单价': '',
        '楼盘地址': '',
        '开发商': '',
        '物业公司': '',
        '开盘时间': '',
        '交房时间': '',
        '建筑类型': '',
        '产权年限': '',
        '车位占比': '',
        '装修标准': '',
        '绿化率': '',
        '物业费': ''
      },
      buildRules: {
        // '单价': {required: true, type: 'number', message: '请输入单价', trigger: 'blur'},
        // '楼盘地址': {required: true, type: 'string', message: '请输入楼盘地址', trigger: 'blur'}
      },
      uploadForm: {
        imgs: [],
        img_info: [],
        video: '',
        video_cover: [],
        vr_cover: [],
        vr_path: '',
        monomer_path: [],
        new_hx: [],
        design_img: [],
        real_img: [],
        sale_fun: '',
        house_about: ''
      },
      uploadFormRules: {
        imgs: { required: true, type: 'array', message: '请上传图片', trigger: 'change' }
      },
      addForm: {
        img: [],
        link: ''
      },
      addLinkForm: {
        img: [],
        title: '',
        link: ''
      },
      addFormRules: {
        img: { required: true, type: 'array', message: '请上传图片', trigger: 'change' }
      },
      cateOptions: [],
      areaOptions: [],
      apartmentOptions: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  async created () {
    let { id, cate, type } = this.$route.query
    this.house_type = type * 1
    this.category = cate
    this.navTitle = id ? `${this.$t('menu.EditHouse')}` : `${this.$t('menu.AddHouse')}`
    if (id) {
      this.id = id
      await this.editGetFormInfo(id)
    }
    await this.getSelectedOptions()
    this.getHouseStaffInfo('')
  },
  methods: {
    categoryChange (id) {
      this.cateOptions.map((item) => {
        if (item.id === id) {
          this.house_type = item.type
        }
      })
    },
    async getHouseStaffInfo () {
      let { data } = await this.$api.getHouseStaffInfo({
        name: ''
      })
      this.options = data
    },
    editGetFormInfo (id) {
      this.$api.editGetHouseInfo({ id }).then(res => {
        if (res.code === 200) {
          res.data.house_staff = res.data.house_staff.map(item => {
            return item.id
          })
          for (let key in this.basicForm) {
            this.basicForm[key] = res.data[key]
          }
          for (let key in this.uploadForm) {
            this.uploadForm[key] = res.data[key]
          }
          this.house = res.data.attrs
          this.area = res.data.community_attrs
          this.house['户型'] = parseInt(res.data.attrs['户型'])
          this.build = res.data.build
          this.uploadForm.imgs = res.data.imgs.map(item => {
            return { url: item }
          })
          if (res.data.img_info.length > 0) {
            this.uploadForm.img_info = res.data.img_info.map(item => {
              return { url: item }
            })
          }
          if (!res.data.new_hx) {
            this.uploadForm.new_hx = []
          }
          if (!res.data.monomer_path) {
            this.uploadForm.monomer_path = []
          }
          this.uploadForm.video_cover = [{ url: res.data.video_cover }]
          this.uploadForm.vr_cover = [{ url: res.data.vr_cover }]
          if (res.data.design_img.length > 0) {
            this.uploadForm.design_img = res.data.design_img.map(item => {
              return { url: item }
            })
          }
          if (res.data.real_img.length > 0) {
            this.uploadForm.real_img = res.data.real_img.map(item => {
              return { url: item }
            })
          }
        }
      })
    },
    submitFormInfo () {
      let formArr = this.house_type === 0 ? ['basicForm', 'house', 'area', 'uploadForm'] : this.house_type === 1 ? ['basicForm', 'house', 'uploadForm'] : ['basicForm', 'build', 'uploadForm']
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        let { basicForm, house, area, build, uploadForm } = this
        let reg = /^[\s\S]*.*[^\s][\s\S]*$/
        if (this.house_type !== 2) {
          if (!house.单价) {
            house.单价 = 0
          }
          if (!reg.test(house.单价)) {
            house.单价 = 0
          }
          if (!reg.test(house.售价)) {
            house.售价 = '待定'
          }
          if (!reg.test(house.室内面积)) {
            house.室内面积 = '待定'
          }
          if (!reg.test(house.建筑面积)) {
            house.建筑面积 = '待定'
          }
        }
        if (this.house_type === 2) {
          if (!build.单价) {
            build.单价 = 0
          }
          if (!reg.test(build.单价)) {
            build.单价 = 0
          }
        }
        let subForm = JSON.parse(JSON.stringify({ ...basicForm, house, area, build, ...uploadForm }))

        subForm.video_cover = subForm.video_cover[0] ? subForm.video_cover[0].url : ''
        subForm.vr_cover = subForm.vr_cover[0] ? subForm.vr_cover[0].url : ''
        subForm.imgs = subForm.imgs.map(item => {
          return item.url
        })
        if (subForm.img_info.length > 0) {
          subForm.img_info = subForm.img_info.map(item => {
            return item.url
          })
        }
        if (subForm.design_img.length > 0) {
          subForm.design_img = subForm.design_img.map(item => {
            return item.url
          })
        }
        if (subForm.real_img.length > 0) {
          subForm.real_img = subForm.real_img.map(item => {
            return item.url
          })
        }
        subForm.category = subForm.category || this.category
        if (this.id) { // 编辑
          subForm.id = this.id
          if (this.house_type !== 2) {
            if (!reg.test(subForm.house.建筑面积)) {
              subForm.house.建筑面积 = '待定'
            }
          }
          this.$api.editGetHouseInfo(subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.$router.back(-1)
            }
          })
        } else { // 添加
          this.$api.addHouseInfo(subForm).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.$router.back(-1)
            }
          })
        }
      }
    },
    getSelectedOptions () {
      this.$api.getHouseCateList().then(res => {
        if (res.code === 200) {
          let { cate, area, apartment } = res.data
          let list = []
          cate.map(item => {
            if (item.type * 1 === this.house_type * 1) {
              list.push(item)
            }
          })
          this.cateOptions = list
          this.areaOptions = area
          this.apartmentOptions = apartment
        }
      })
    },
    handleClose (index) {
      this.basicForm.labels.splice(index, 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        this.basicForm.labels.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    selectedFiles (imgs, key) {
      this.uploadForm[key].push(...imgs)
    },
    moveFiles (imgs, key) {
      this.uploadForm[key] = imgs
    },
    getVideo (video) {
      this.uploadForm.video = video[video.length - 1].url
    },
    getVideoCover (img) {
      this.uploadForm.video_cover = img
    },
    getVRCover (img) {
      this.uploadForm.vr_cover = img
    },
    getMonomerCover (img) {
      this.addLinkForm.img = img
    },
    getNewHxCover (img) {
      this.addForm.img = img
    },
    showHouse (index, type) {
      let key = type === 1 ? 'monomer_path' : 'new_hx'
      let item = this.uploadForm[key][index]
      item.img = [{ url: item.img }]
      if (type === 1) {
        this.addLinkForm = item
        this.showHouseLinkInd = index + 1
        this.showHouseLinkDialog = true
      } else {
        this.addForm = item
        this.showHouseInd = index + 1
        this.showHouseDialog = true
      }
    },
    closeHouse (type) {
      let item = type === 1 ? this.addLinkForm : this.addForm
      if (type === 1) {
        if (this.showHouseLinkInd) {
          this.addLinkForm.img = item.img[0].url
          this.uploadForm.monomer_path[this.showHouseLinkInd - 1] = item
        }
        this.addLinkForm = {
          img: [],
          title: '',
          link: ''
        }
        this.showHouseLinkInd = 0
        this.showHouseLinkDialog = false
      } else {
        if (this.showHouseInd) {
          this.addForm.img = item.img[0].url
          this.uploadForm.new_hx[this.showHouseInd - 1] = item
        }
        this.addForm = {
          img: [],
          link: ''
        }
        this.showHouseInd = 0
        this.showHouseDialog = false
      }
    },
    delHouse (index, type) {
      let key = type === 1 ? 'monomer_path' : 'new_hx'
      this.uploadForm[key].splice(index, 1)
    },
    submitAddFormInfo (type) {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          let item = type === 1 ? this.addLinkForm : this.addForm
          if (type === 1) {
            this.addLinkForm.img = item.img[0].url
            if (this.showHouseLinkInd) {
              this.uploadForm.monomer_path[this.showHouseLinkInd - 1] = item
            } else { this.uploadForm.monomer_path.push(item) }
            this.addLinkForm = {
              img: [],
              title: '',
              link: ''
            }
            this.showHouseLinkInd = 0
            this.showHouseLinkDialog = false
          } else {
            this.addForm.img = item.img[0].url
            if (this.showHouseInd) {
              this.uploadForm.new_hx[this.showHouseInd - 1] = item
            } else { this.uploadForm.new_hx.push(item) }
            this.addForm = {
              img: [],
              link: ''
            }
            this.showHouseInd = 0
            this.showHouseDialog = false
          }
        }
      })
    },
    /**
     * @method 获取经纬度
     */
    getLatLng (latLng) {
      this.basicForm.latitude = latLng.lat
      this.basicForm.longitude = latLng.lng
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-edit-house {
  width: 100%;
  .el-cascader,
  .el-select,
  .el-input,
  .el-input-number {
    width: 300px;
  }
  .el-textarea {
    width: 500px;
  }
  .el-tag {
    margin-right: 10px;
  }
  .button-new-tag {
    // margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    // margin-left: 10px;
    vertical-align: bottom;
  }
  .inline-form {
    margin-left: 100px;
    width: 1000px;
    .el-input,
    .el-select,
    .el-input-number {
      width: 200px;
    }
  }
  .item-warp {
    display: flex;
  }
}
.house-wrap {
  display: inline-block;
  .lb-upload-more {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .more-item {
      width: 140px;
      height: 140px;
      border-radius: 6px;
      position: relative;
      margin-right: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      .el-image {
        width: 140px;
        height: 140px;
        z-index: 5;
        border-radius: 6px;
        border: 1px solid #d9d9d9;
      }
      .mask {
        display: none;
        position: absolute;
        width: 100%;
        height: 140px;
        background: rgba(0, 0, 0, 0.5);
        font-size: 20px;
        color: #fff;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        z-index: 10;
        top: 0;
        left: 0;
        i {
          margin: 0 10px;
          cursor: pointer;
        }
      }
      &:hover {
        .mask {
          display: flex;
        }
      }
    }
    .up-item {
      width: 140px;
      height: 140px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      i {
        font-size: 26px;
        line-height: 140px;
      }
      &:hover {
        border: 1px dashed #09f;
      }
    }
  }
  .dialog-inner-img {
    display: flex;
    justify-content: center;
    align-items: center;
    .dialog-img {
      width: 100%;
    }
  }
}
</style>
